Workspace 和 Overrides 是 DevTools 中两个互补的持久化机制。Workspace 让你在浏览器中编辑本地文件并实时同步；Overrides 让你拦截远程资源并用本地文件替代。两者结合，可以实现"在浏览器中直接编码"的终极体验。
| 特性 | Workspace | Overrides |
|---|---|---|
| 数据流向 | 双向同步 | 单向（本地 → 页面） |
| 适用资源 | 本地开发项目的源文件 | 任何远程资源（含第三方） |
| 需要本地服务器 | ✅ 是 | ❌ 否 |
| 修改持久化 | ✅ 自动保存到本地文件 | ✅ 保存到本地 Overrides 目录 |
| 典型场景 | 本地开发、CSS 热重载 | 线上调试、第三方资源替换 |
| Source Map 支持 | ✅ 直接编辑源码 | ✅ 覆盖编译后的文件 |
Filesystem 标签页+ Add folder to workspaceAllow设置完成后，Sources 面板的 Filesystem 标签页会显示你的本地文件树。
DevTools 会自动将本地文件与页面加载的资源进行映射。映射成功的文件在 Page 标签页中会显示绿色圆点标记。
如果映射失败，右键文件 → Map to File System Resource... → 选择对应的本地文件。
这是 Workspace 最惊艳的功能：在 Elements 面板的 Styles 窗格中修改的任何 CSS，会立即自动保存到本地 CSS 文件，无需 Cmd + S。
当你在 Styles 窗格中点击 +（New Style Rule）添加新样式规则时：
inspector-stylesheet（临时样式表）长按 + 按钮后选择 Workspace 中的 CSS 文件，新规则会直接写入该文件。
Workspace 不仅支持 CSS，还支持：
http://localhost:...），file:// 协议不支持 WorkspaceOverrides 标签页+ Select folder for overridesAllow方式一：Network 面板
Override content方式二：Sources 面板
Override content💡 Overrides 是线上调试的终极武器：你可以在不部署的情况下，在本地修改任何远程资源来验证修复方案。
Override content这比搭建 Mock Server 快得多，适合快速验证前端对各种数据状态的响应。
Delete 移除覆盖Enable Local Overrides 可以临时禁用所有覆盖| 场景 | 推荐方案 |
|---|---|
| 本地开发项目 | Workspace（双向同步） |
| 调试线上 Bug | Overrides（拦截远程资源） |
| 修改第三方库 | Overrides（本地替换） |
| CSS 快速迭代 | Workspace（热重载） |
| Mock API 数据 | Overrides（修改响应） |
| 编辑 TypeScript 源码 | Workspace + Source Map |
| 修改生产环境 JS | Overrides（本地替换） |
Q: Workspace 的 CSS 修改没有同步到文件？
检查：
http://localhost 运行（非 file://）Q: Overrides 不生效？
检查：
Enable Local Overrides 是否勾选local）Q: Workspace 和 Overrides 可以同时使用吗？
可以。对于本地开发项目，使用 Workspace 管理源码；对于项目中引用的 CDN 资源或第三方库，使用 Overrides 进行临时替换。